<template>
  <div class="app-container">
    <el-dialog
      :title="auditModel.title"
      :visible.sync="auditModel.show"
      width="500px"
      append-to-body
    >
      <el-form
        ref="auditModelForm"
        :model="auditModel.form"
        label-position="top"
        label-width="100px"
        label-suffix=":"
        :rules="auditModel.rules"
      >
        <el-row :gutter="10" class="mb8">
          <el-col :span="24">
            <el-form-item label="是否确认通过审核" prop="auditStatus" label-width="100px" >
              <el-radio-group v-model="auditModel.form.auditStatus">
                <el-radio :label="1">通过</el-radio>
                <el-radio :label="2">驳回</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col
            v-if="auditModel.form.auditStatus === 2" 
            :span="24"
          >
            <el-form-item label="驳回原因" prop="auditReason" label-width="100px" >
              <el-input
                class="custom-input"
                v-model="auditModel.form.auditReason"
                placeholder="请输入，最多200字"
                style="width: 100%"
                type="textarea"
                maxlength="200"
                show-word-limit
                :autosize="{ minRows: 4 }"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="auditModel.sumbit">确 定</el-button>
        <el-button @click="auditModel.show = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 审核
      auditModel: {
        show: false,
        title: "审核",
        form: {
          id: undefined,
          auditStatus: 1,
          auditReason: undefined,
        },
        rules: {
          auditReason: [
            { required: true, message: "请输入驳回原因", trigger: "change" },
          ]
        },
        openModel: async (row) => {
          this.auditModel.show = true;
          this.auditModel.form.id = row.id;
          this.auditModel.form.auditStatus = 1;
          this.auditModel.form.auditReason = undefined;
        },
        sumbit: async () => {
          this.$refs["auditModelForm"].validate((valid) => {
            if (valid) {
              this.network().handleAudit(this.auditModel.form);
            }
          });
        },
        clear: async () => {
          this.auditModel.show = false;
          this.auditModel.form.auditStatus = 1;
          this.auditModel.form.auditReason = undefined;
        },
      },
      auditInterface: null
    };
  },
  methods: {
    onShow(row, auditInterface) {
      this.auditInterface = auditInterface;
      this.auditModel.openModel(row);
    },
    network() {
      return {
        handleAudit: async (form) => {
          const { code } = await this.auditInterface(form);
          if (code === 0) {
            const text = form.auditStatus === 1 ? "审核成功" : "拒绝成功";
            this.$modal.msgSuccess(text);
            this.auditModel.clear();
          }
          this.$emit("refresh")
        },
      };
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep {
  .el-dialog__body {
    padding: 10px 20px 0px!important;
  }
}
</style>
